<!DOCTYPE html>
<html>
<head>
    <title>员工管理系统测试页面</title>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; }
        button, a { padding: 10px 15px; margin: 5px; text-decoration: none; color: white; 
                   border-radius: 4px; display: inline-block; }
        .btn-primary { background-color: #007bff; }
        .btn-success { background-color: #28a745; }
        .btn-warning { background-color: #ffc107; color: #212529; }
        .btn-danger { background-color: #dc3545; }
    </style>
</head>
<body>
    <h1>员工管理系统测试页面</h1>
    
    <div class="test-section">
        <h2>基本功能测试</h2>
        <p>请逐一点击以下链接，检查是否能正常跳转：</p>
        <a href="./employee/" class="btn-primary">员工列表</a>
        <a href="./employee/add" class="btn-success">添加员工</a>
        <a href="./dashboard" class="btn-warning">仪表板</a>
    </div>
    
    <div class="test-section">
        <h2>JavaScript功能测试</h2>
        <button onclick="testRedirect('./employee/')" class="btn-primary">测试员工列表跳转</button>
        <button onclick="testRedirect('./employee/add')" class="btn-success">测试添加员工跳转</button>
        <button onclick="testRedirect('./dashboard')" class="btn-warning">测试仪表板跳转</button>
    </div>
    
    <div class="test-section">
        <h2>结果区域</h2>
        <div id="result" style="min-height: 50px; padding: 10px; background-color: #f8f9fa; border-radius: 4px;">
            点击上面的按钮进行测试...
        </div>
    </div>

    <script>
        function testRedirect(url) {
            document.getElementById('result').innerHTML = '正在跳转到: ' + url;
            // 延迟1秒跳转，让用户看到提示信息
            setTimeout(function() {
                window.location.href = url;
            }, 1000);
        }
    </script>
</body>
</html>